<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>拖拽</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/common.js"></script>
    <script src="js/vue-grid-layout.umd.min.js"></script>
    <style type="text/css">
        .gridItem {
            border: solid black 1px;
            background-color: #CCCCCC;
            width: 50px; /* 增加宽度 */
            height: 50px; /* 增加高度 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px; /* 增加字体大小 */
            color: #333;
            transition: background-color 0.3s, transform 0.3s;
        }
        .gridItem:hover {
            background-color: #999999;
            transform: scale(1.05);
        }
        .gridItem2 {
            border: solid black 1px;
            background-color: #ffaa00;
            width: 50px; /* 增加宽度 */
            height: 50px; /* 增加高度 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px; /* 增加字体大小 */
            color: #333;
            transition: background-color 0.3s, transform 0.3s;
        }
        .gridItem2:hover {
            background-color: #ff8800;
            transform: scale(1.05);
        }
        #griddiv {
            border: 1px solid lightgray;
            padding: 10px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="initgrid">生成</button>
        <div id="griddiv">
            <grid-layout :layout.sync="layout" :col-num="30" :row-height="50" :is-draggable="true"
                :is-resizable="true" :is-mirrored="false" :vertical-compact="false" :margin="[5, 5]"
                :use-css-transforms="true" :responsive="false"
                :prevent-collision="true">
                <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i"
                    :key="item.i" :class="item.status==1?'gridItem':'gridItem2'">
                    {{item.i}}
                </grid-item>
            </grid-layout>
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                layout: [{
                        "x": 0,
                        "y": 0,
                        "w": 1,
                        "h": 1,
                        "i": "0",
                        "status":1
                    }
                ],
            },
            methods: {
                initgrid() {
                    let row = 8
                    let col = 30
                    this.layout=[]
                    for (let i = 0; i < row; i++) {
                        for (let j = 0; j < col; j++) {
                            let obj = {
                                "x": j,
                                "y": i,
                                "w": 1,
                                "h": 1,
                                "i": i +""+ j,
                                "status":i%2 //这个是测试看不同样式效果
                            }
                            this.layout.push(obj)
                        }
                    }
                }
            },
            mounted() {

            }
        })
    </script>
</body>
</html>